/**
 * @description 组件样式
 * @author: 陈陈
 * @date: 2025/05/09
 * @phone: 18560000860
 * @email: 18560000860@qq.com
 * @company: 济南晨霜信息技术有限公司 /
 * @business: 承接前后端项目的开发
 */
.pure-notice-bar {
	background: var(--puer-notice-bar-background, var(--pure-background-default));
	display: flex;
	align-items: center;
	gap: var(--pure-notice-bar-gap, 8px);
	position: relative;
	padding: var(--pure-notice-bar-padding, 0 12px);
	transform-origin: center top;
	transition: var(--pure-notice-bar-transition, 0.25s ease-in-out);

	&__left {
		flex-shrink: 0;
	}

	&__icon {
		flex-shrink: 0;
		width: var(--pure-notice-bar-icon-width);
		text-align: var(--pure-notice-bar-icon-text-align, center);
		font-size: var(--pure-notice-bar-icon-font-size, var(--pure-font-size-large));
		font-weight: var(--pure-notice-bar-icon-font-weight);
		color: var(--pure-notice-bar-icon-color);
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		margin: var(--pure-notice-bar-icon-margin);
		padding: var(--pure-notice-bar-icon-padding);

		&--notice {
			font-size: var(
				--pure-notice-bar-icon-notice-font-size,
				var(--pure-notice-bar-icon-font-size, var(--pure-font-size-large))
			);
			font-weight: var(--pure-notice-bar-icon-notice-font-weight, var(--pure-notice-bar-icon-font-weight));
			color: var(--pure-notice-bar-icon-notice-color, var(--pure-notice-bar-icon-color));
			margin: var(--pure-notice-bar-icon-notice-margin, var(--pure-notice-bar-icon-margin));
			padding: var(--pure-notice-bar-icon-notice-padding, var(--pure-notice-bar-icon-padding));
		}

		&--arrow {
			font-size: var(
				--pure-notice-bar-icon-arrow-font-size,
				var(--pure-notice-bar-icon-font-size, var(--pure-font-size-large))
			);
			font-weight: var(--pure-notice-bar-icon-arrow-font-weight, var(--pure-notice-bar-icon-font-weight));
			color: var(--pure-notice-bar-icon-arrow-color, var(--pure-notice-bar-icon-color));
			margin: var(--pure-notice-bar-icon-arrow-margin, var(--pure-notice-bar-icon-margin));
			padding: var(--pure-notice-bar-icon-arrow-padding, var(--pure-notice-bar-icon-padding));
		}

		&--close {
			font-size: var(
				--pure-notice-bar-icon-close-font-size,
				var(--pure-notice-bar-icon-font-size, var(--pure-font-size-large))
			);
			font-weight: var(--pure-notice-bar-icon-close-font-weight, var(--pure-notice-bar-icon-font-weight));
			color: var(--pure-notice-bar-icon-close-color, var(--pure-notice-bar-icon-color));
			margin: var(--pure-notice-bar-icon-close-margin, var(--pure-notice-bar-icon-margin));
			padding: var(--pure-notice-bar-icon-close-padding, var(--pure-notice-bar-icon-padding));
		}
	}

	&__body {
		flex: 1;
		overflow: hidden;
		height: 100%;
		position: relative;
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	&__arrow {
		flex-shrink: 0;
	}

	&__right {
		flex-shrink: 0;
	}

	&--show {
		opacity: 1;
		transform: scaleY(1);
		height: var(--pure-notice-bar-height, 3em);
	}

	&--hide {
		opacity: 0;
		transform: scaleY(0);
		height: 0;
	}
}

.pure-notice-bar-items-horizontal {
	width: 100%;
	height: 100%;
	position: relative;
	overflow: hidden;

	&__item {
		white-space: nowrap;
		position: absolute;
		top: 0;
		left: 100%;
		width: auto;
		height: 100%;
		display: flex;
		align-items: center;
		flex-direction: row;
		animation-timing-function: linear;
		animation-duration: var(--pure-notice-bar-item-move-duration, 5s);
		animation-iteration-count: 1;
		animation-fill-mode: forwards;
		animation-delay: 0s;
		opacity: 0;

		&--move {
			animation-name: pure-notice-bar-item-horizontal-move-animation;
			opacity: 1;
		}
	}

	@keyframes pure-notice-bar-item-horizontal-move-animation {
		0% {
			left: 100%;
		}

		100% {
			left: var(--pure-notice-bar-item-to-left);
		}
	}
}

.pure-notice-bar-items-vertical {
	width: 100%;
	height: var(--pure-notice-bar-items-vertical-height, 100%);
	position: relative;
	overflow: hidden;

	&__item {
		max-width: 100%;
		position: absolute;
		top: 100%;
		left: 0;
		width: 100%;
		height: auto;
		min-height: 100%;
		animation-timing-function: linear;
		animation-duration: var(--pure-notice-bar-item-move-duration, 5s);
		animation-iteration-count: 1;
		animation-fill-mode: forwards;
		animation-delay: 0s;
		opacity: 1;
		display: flex;
		flex-direction: row;
		align-items: center;

		&--move {
			animation-name: pure-notice-bar-item-vertical-move-animation;
			opacity: 1;
		}
	}

	@keyframes pure-notice-bar-item-vertical-move-animation {
		0% {
			top: 100%;
		}

		100% {
			top: var(--pure-notice-bar-item-to-top);
		}
	}
}
